/**
 * Created by vector on 2017/11/20.
 * 点击首页警告图表后的警告页面
 */

import React from 'react';
import {
    View,
    Text,
    ToastAndroid,
    StyleSheet,
    StatusBar,
    TouchableOpacity,
    Image,
    Dimensions,
    ListView
} from 'react-native';

const {height, width} = Dimensions.get('window');
const WarnInfoDataApi = "http://192.168.1.104:8087/v1/errorDatas?p_id=";
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class WarnInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: ds.cloneWithRows([]),
        };
    }

    componentWillMount() {
        this.getDataFromApi();
    }


    async getDataFromApi() {
        try {
            let response = await fetch(WarnInfoDataApi+this.props.p_id);
            let responseJson = await response.json();

            this.setState({
               dataSource:ds.cloneWithRows(responseJson)
            });

            console.log(responseJson);
        }
        catch (error){
            ToastAndroid.showWithGravity(
                '网络错误',
                ToastAndroid.SHORT,
                ToastAndroid.CENTER
            )
        }
    }

    back() {
        this.props.navigator.pop();
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="rgb(28,28,29)"
                    barStyle="light-content"
                />
                <View style={styles.navView}>
                    <TouchableOpacity activeOpacity={0.5} onPress={this.back.bind(this)}>
                        <Image source={require('./icon/nav_back_icon.png')} style={styles.navIconLeft}/>
                    </TouchableOpacity>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                        <Text style={{color:'#ffffff',fontSize:25}}>
                            报错信息
                        </Text>

                        <Text style={{color:'rgb(201,203,204)',paddingTop:10,fontSize:16,paddingLeft:4}}>
                            {this.state.summary}
                        </Text>
                    </View>
                    <View style={styles.navIconRight}>
                    </View>
                </View>
                <View style={styles.bottomView}>
                    <View style={{width:width,height:60,flexDirection:'row',alignItems:'center',marginTop:30}}>
                        <Image source={require('./icon/warn_icon.png')} style={styles.WarnIcon}/>
                        <Text style={{fontSize:22,color:'#ffffff',paddingLeft:22}}>{this.props.program_name}</Text>
                    </View>
                    <ListView
                        automaticallyAdjustContentInsets={false}
                        dataSource={this.state.dataSource}
                        style={{marginTop:22}}
                        enableEmptySections={true}
                        renderRow={(rowData) => {
                            return(
                                <View style={{flexDirection:'column',justifyContent:'center',paddingLeft:25,marginBottom:18}}>
                                    <Text style={{fontSize:20,color:'#ffffff'}}>{rowData.happen_time}</Text>
                                    <Text style={{fontSize:18,color:'rgb(201,110,33)',marginTop:0}}>{rowData.error_type !== null ? rowData.error_type : '-- -- --'}</Text>
                                </View>
                            )
                        }}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    navView: {
        backgroundColor:'rgb(28,28,29)',
        width:width,
        height:50,
        flexDirection:'row',
        alignItems:'center',
    },
    navIconLeft: {
        width:40,
        height:40,
        marginLeft:10,
    },
    navIconRight: {
        width:28,
        height:28,
        marginRight:20
    },
    bottomView:{
        backgroundColor:'rgb(34,36,41)',
        flex:1
    },
    WarnIcon: {
        width:55,
        height:55,
        marginLeft:25
    },
});